<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<link href="css/login.css" rel="stylesheet" type="text/css">
		<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="bigbox">
		<div class="box">
			<div class="head">
				<img src="images/login_1.png">
				<p>华为帐号</p>
				<span>登录华为帐号以使用云空间、华为应用及更多服务</span>
			</div>
			<div class="yh">
				<input type="text"placeholder="手机号/邮件地址/华为号 " class="in1"/>
				<div class="mm">
					<input type="password" placeholder="密码"  class="in2"/>
					<img src="images/login_no.png" class="no">
					<img src="images/login_yes.png" class="yes">
				</div>
				<span class="left fl">短信验证码登录</span><span class="left fr">忘记密码</span>
				<div class="clear"></div>
			</div>
			<div class="btn">
				<a href="index.html"><button type="button">登录</button></a>
				<button type="button" class="btn_1">注册帐号</button>
			</div>
			<div class="wt">
				<p>遇到问题</p>
				<span>其他方式登录</span>
				<div class="pt">
					<img src="images/qq.png">
					<img src="images/wb.png">
				</div>
			</div>
		</div>
		</div>
		
		
		
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
		<script>
			// var in1=document.querySelector(".in1");
			// var in2=document.querySelector(".in2");
			// in1.onclick=function(){
			// 	this.style.borderBottomColor="black";
			// }
			// in2.onclick=function(){
			// 	this.style.borderBottomColor="black";
			// }
			
			// 
			$(".no").click(function(){
				$(".in2").attr("type","text");
				$(this).hide();
				$(".yes").show();
			})
			$(".yes").click(function(){
				$(".in2").attr("type","password");
				$(this).hide();
				$(".no").show();
			})
		</script>
	</body>
</html>
